import React, { Component } from "react";
import style from './index.module.scss'
import { Card, Space } from 'antd'
import { Form, Input, Button } from 'antd';
import Request from '../../utils/axios.request'
import { Navigate } from "react-router-dom";

interface ILoginProps {
}
interface ILoginState {
    lrState: Boolean,
    loginState: Boolean
}

export default class Login extends Component<ILoginProps, ILoginState> {
    constructor(props: ILoginProps) {
        super(props)
        this.state = {
            lrState: true,
            loginState: false,
        }
    }
    onFinish = (values: any): void => {
        console.log('Success:', values);
        if (this.state.lrState) {
            // 登录
            Request.login(values).then(res => {
                console.log(res.data)
                localStorage.setItem("token", res.data.data.token)
                if (res.data.code === 200) {
                    this.setState({
                        loginState: true
                    })
                }
            })
        } else {
            // 注册
            values.quota = values.quotas * 100
            Request.register(values).then(res => {
                console.log(res)
                if (res.data.code === 200) {
                    this.setState({
                        lrState: true
                    })
                }
            })
        }
    };

    onFinishFailed = (errorInfo: any): void => {
        console.log('Failed:', errorInfo);
    };
    register = (): void => {
        this.setState({
            lrState: !this.state.lrState
        })
    }
    render(): React.ReactNode {
        return (<div className={style.wrap}>
            <Card title="登录" className={style.card} extra={<p className={style['right-title']} onClick={this.register}>{this.state.lrState ? "注册" : "登录"}</p>}>
                {this.state.lrState ?
                    this.state.loginState ? <Navigate to='/' replace></Navigate> :
                        <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            initialValues={{ remember: true }}
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                            autoComplete="off"

                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input placeholder="请输入用户名" value="张天师" />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入密码!' }]}
                            >
                                <Input.Password placeholder="请输入密码" value="zts" />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Space>
                                    <Button type="primary" htmlType="submit">
                                        登录
                                    </Button>

                                </Space>
                            </Form.Item>
                        </Form>
                    : <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="昵称"
                            name="name"
                            rules={[{ required: true, message: '请输入昵称!' }]}
                        >
                            <Input placeholder="请输入昵称" value="张天师" />
                        </Form.Item>
                        <Form.Item
                            label="用户名"
                            name="LoginName"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input placeholder="请输入用户名" value="zts" />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="LoginPassword"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password placeholder="请输入密码" value="123123" />
                        </Form.Item>
                        <Form.Item
                            label="再次输入密码"
                            name="resetPassword"
                            rules={[{ required: true, message: '请再次输入密码!' }]}
                        >
                            <Input.Password placeholder="请再次输入密码" value="1231234" />
                        </Form.Item>
                        <Form.Item
                            label="每月预算金额"
                            name="quotas"
                            rules={[{ required: true, message: '请输入每月预算金额!' }]}
                        >
                            <Input placeholder="请输入每月预算金额" value="100" />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Space>

                                <Button type="primary" htmlType="submit">
                                    注册
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>}

            </Card>

        </div >);
    }
}